<template>
  <div>
    <!-- pc 头部 -->

    <!-- 海报 -->
    <!-- <div class="banner"></div> -->
    <!-- <banner></banner> -->
    <!-- 服务 小分类导航 我们能做什么 -->
    <!-- <div class="weCan hidden-xs">
      <ul>
        <li>
          <a href>品牌网站建设</a>
        </li>
        <li>
          <a href>微信定制开发</a>
        </li>
        <li>
          <a href>APP定制开发</a>
        </li>
        <li>
          <a href>VR全景营销</a>
        </li>
      </ul>
    </div>-->
    <!-- <we-can></we-can> -->
    <!-- vr 全景营销 -->
    <nav-top class="mnavtop" :menu_index="3"></nav-top>
    <div class="panorama">
      <div class="panorama_top">
        <h2>VR全景营销</h2>
        <p>为客户打造完美的720°全景数字营销解决方案</p>
      </div>
      <div class="panorama_bot hidden-xs">
        <span class="panorama_bot_t">720全景技术给人们带来全新的真实现场感和交互式的感受。广泛应用于房地产楼盘展示、虚拟旅游、虚拟教育等领域，所显示场景即为真实场景，与传统的虚拟现实相比更加</span>
        <span class="panorama_bot_t">真实生动。三维全景图像源自对真实场景的摄影捕捉，真实感强烈。</span>
        <span class="panorama_bot_t">360环物将产品以360°的视角，真实的向客户展示，让客户看的清楚、买的放心。提供栩栩如生的物品展示，应用于各种产</span>
        <span class="panorama_bot_t">品展示，利用环物摄影展示技术，将商品特色作完整的呈现，突</span>
        <span class="panorama_bot_t">破传统的产品展示模式，为商家在互联网上推广销售产品提供一个有力的展示方式。</span>
      </div>
      <div class="m_panorama_bot hidden-lg hidden-md hidden-sm">
        <span>
          720全景技术给人们带来全新的真实现场感和交互式的感受。广泛应用于房地产楼盘展示、虚拟旅游、虚拟教育等领域，所显示场景即为真实场景，与传统的虚拟现实相比更加
          真实生动。三维全景图像源自对真实场景的摄影捕捉，真实感强烈。
          360环物将产品以360°的视角，真实的向客户展示，让客户看的清楚、买的放心。提供栩栩如生的物品展示，应用于各种产
          品展示，利用环物摄影展示技术，将商品特色作完整的呈现，突
          破传统的产品展示模式，为商家在互联网上推广销售产品提供一个有力的展示方式。
        </span>
      </div>
    </div>
    <!-- 为什么选择我们 -->
    <div class="vmchoose">
      <h2>为什么选择我们</h2>
      <ul>
        <li>
          <!--图片 -->
          <div class="pic"></div>
          <!-- 特点 -->
          <div class="advantage">速度快、流畅</div>
          <!-- 介绍 -->
          <span>优化图片、速度更快、更流畅 ，给你极致的体验</span>
        </li>
        <li>
          <!--图片 -->
          <div class="pic"></div>
          <!-- 特点 -->
          <div class="advantage">多终端展示平台</div>
          <!-- 介绍 -->
          <span>支持网站，触摸一体机，手机微信端、IPAD等多种终端展示</span>
        </li>
        <li>
          <!--图片 -->
          <div class="pic"></div>
          <!-- 特点 -->
          <div class="advantage">超高清拍摄</div>
          <!-- 介绍 -->
          <span>高端全景拍摄设备采集图像素材，高达过万像素全景画质输出</span>
        </li>
        <li>
          <!--图片 -->
          <div class="pic"></div>
          <!-- 特点 -->
          <div class="advantage">高品质、无缝衔接</div>
          <!-- 介绍 -->
          <span>高品质、无错位、无过暴、无暗淡 无模糊现象</span>
        </li>
      </ul>
    </div>
    <div :class="['vr_choose','mchoose',choose_flag?'chooseactive':'']">
      <h2>为什么选择我们</h2>
      <ul>
        <li>
          <!--图片 -->
          <div class="pic">
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/VR/01-2.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/6.png" alt />
          </div>
          <!-- 特点 -->
          <div class="advantage">速度快、流畅</div>
          <!-- 介绍 -->
          <span>优化图片、速度更快、更流畅 ，给你极致的体验</span>
        </li>
        <li>
          <!--图片 -->
          <div class="pic">
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/7.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/VR/02-2.png" alt />
          </div>
          <!-- 特点 -->
          <div class="advantage">多终端展示平台</div>
          <!-- 介绍 -->
          <span>支持网站，触摸一体机，手机微信端、IPAD等多种终端展示</span>
        </li>
        <li>
          <!--图片 -->
          <div class="pic">
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/VR/03-2.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/8.png" alt />
          </div>
          <!-- 特点 -->
          <div class="advantage">超高清拍摄</div>
          <!-- 介绍 -->
          <span>高端全景拍摄设备采集图像素材，高达过万像素全景画质输出</span>
        </li>
        <li>
          <!--图片 -->
          <div class="pic">
            <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/VR/04-2.png" alt />
            <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/9.png" alt />
          </div>
          <!-- 特点 -->
          <div class="advantage">高品质、无缝衔接</div>
          <!-- 介绍 -->
          <span>高品质、无错位、无过暴、无暗淡、无模糊现象</span>
        </li>
      </ul>
    </div>
    <!-- vr应用场景有哪些 -->
    <div :class="['scene',scene_flag?'scene_active':'']">
      <div class="scene_top">
        <h2>VR应用场景有哪些</h2>
        <p>VR全景市场空间大，适用于线下各个行业领域</p>
      </div>
      <div :class="['scene_bot', scene_bot_flag?'scene_bot_active':'']">
        <ul>
          <li>
            <div class="pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/VR/vr01-2.png" alt />
            </div>
            <span>旅游</span>
          </li>
          <li>
            <div class="pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/VR/vr02-2.png" alt />
            </div>
            <span>酒店</span>
          </li>
          <li>
            <div class="pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/VR/vr03-2.png" alt />
            </div>
            <span>展馆</span>
          </li>
          <li>
            <div class="pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/VR/vr04-2.png" alt />
            </div>
            <span>汽车</span>
          </li>
          <li>
            <div class="pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/VR/vr05-2.png" alt />
            </div>
            <span>政府</span>
          </li>
          <li>
            <div class="pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/VR/vr06-2.png" alt />
            </div>
            <span>展会</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 移动端 -->
    <div class="vrmscene">
      <div class="scene_top">
        <h2>VR应用场景有哪些</h2>
        <p>VR全景市场空间大，适用于线下各个行业领域</p>
      </div>
      <div class="scene_bot">
        <ul>
          <li>
            <div class="pic"></div>
            <span>旅游</span>
          </li>
          <li>
            <div class="pic"></div>
            <span>酒店</span>
          </li>
          <li>
            <div class="pic"></div>
            <span>展馆</span>
          </li>
          <li>
            <div class="pic"></div>
            <span>汽车</span>
          </li>
          <li>
            <div class="pic"></div>
            <span>政府</span>
          </li>
          <li>
            <div class="pic"></div>
            <span>展会</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 那些大咖选择我们 -->
    <!-- <div class="bigShot">
      <div class="bigShot_top">
        <h2>有哪些行业大咖选择我们</h2>
        <p>我们追求完美的创意设计和用户体验，更关注您的满意</p>
      </div>
      <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
        <ul class="item">
          <li v-for="(item,index) in newsList" :key="index">
            <img :src="item.src" alt />
          </li>
        </ul>
    </vue-seamless-scroll>-->
    <!-- <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>-->

    <!-- </div> -->
    <!-- 那些大咖选择我们 -->
    <!-- <div class="Vr_bigShot">
      <div class="vr_bigShot_top">
        <h2>有哪些行业大咖选择我们</h2>
        <p>我们追求完美的创意设计和用户体验，更关注您的满意</p>
      </div>
      <div class="vr_bigShot__bot">
        <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
          <ul class="item">
            <li v-for="(item,index) in newsList" :key="index">
              <img :src="item.src" alt="">
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>-->
    <shot></shot>
    <!-- 脚部 -->
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import navTop from '../Components/nav-one'
import shot from '../Components/shot'

export default {
  components: {
    swiper,
    swiperSlide,
    navTop,
    shot
  },

  data() {
    return {
      scene_flag: false,
      scene_bot_flag: false, //场景
      choose_flag: false, //选择特效
      swiperOption2: {
        notNextTick: true,
        loop: true,
        slidesPerView: 6,
        spaceBetween: 20,
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        slidesOffsetBefore: 50,
        pagination: {
          el: '.swiper-pagination'
        },
        // pagination: ".swiper-pagination",
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true
      },
      newsList: [
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/333.png'
        },
        {
          // src: require("../../assets/img/tb/333.png")
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/333.png'
        },
        {
          // src: require("../../assets/img/tb/333.png")
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/333.png'
        },
        {
          // src: require("../../assets/img/tb/333.png")
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/333.png'
        },
        {
          // src: require("../../assets/img/tb/333.png")
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/333.png'
        },
        {
          // src: require("../../assets/img/tb/333.png")
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/333.png'
        }
      ]
    }
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 6,
        hoverStop: true, //是否开启鼠标悬停stop
        openWatch: true, //开启数据实时监控刷新dom
        singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 //单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    // document.body.addEventListener("touchstart", function() {});
  },
  methods: {
    handleScroll(e) {
      this.scroll = this.scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop // 执行代码
      // console.log(this.scroll)
      if (this.scroll > 200) {
        this.choose_flag = true
      }
      if (this.scroll > 600) {
        this.scene_flag = true
      }
      if (this.scroll > 1075) {
        this.scene_bot_flag = true
      }
    }
  }
}
</script>

<style scoped>
/* @import url('../../assets/css/VR/Vr.css');
@import url('../../assets/css/VR/mVr.css'); */
@import url('../../assets/css/VR/VR.css');
@import url('../../assets/css/VR/mVr.css');
</style>